
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>5.6.&nbsp;&#26696;&#20363;&#65306;Frownies [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;5&nbsp;&#31456;&nbsp;&#23454;&#20363;&#25945;&#23398;">
      <link rel="prev" href="dumbquotes.html" title="5.5.&nbsp;&#26696;&#20363;&#65306;Dumb Quotes">
      <link rel="next" href="zoomtextarea.html" title="5.7.&nbsp;&#26696;&#20363;&#65306;Zoom Textarea">
   </head>
   <body id="diveintogreasemonkey-org" class="casestudy-frownies">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#23454;&#20363;&#25945;&#23398;</a> &#8594; <span class="thispage">&#26696;&#20363;&#65306;Frownies</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="casestudy.frownies" class="skip" href="#casestudy.frownies" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 5.6.&nbsp;&#26696;&#20363;&#65306;Frownies
                        </h2>
                     </div>
                     <div>
                        <h3 class="subtitle">&#36716;&#25442;&#22270;&#29255;&#34920;&#24773;&#20026;&#25991;&#23383;</h3>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>Frownies &#26159;&#23545;&#19968;&#20010;&#29609;&#31505;&#30340;&#22238;&#24212;&#12290;<a href="http://greasemonkey.mozdev.org/list.html">Greasemonkey &#37038;&#20214;&#21015;&#34920;</a>&#26377;&#20154;&#23459;&#31216;&#20182;&#20204;&#24320;&#21457;&#20102;&#19968;&#20010;&#29992;&#25143;&#33050;&#26412;&#65292;&#21487;&#20197;&#25226; ASCII &#8220;<span class="quote">&#34920;&#24773;&#31526;&#21495;</span>&#8221; &#27604;&#22914; <code class="literal">:-)</code> &#36716;&#25442;&#20026;&#19982;&#23427;&#20204;&#30456;&#21516;&#21547;&#20041;&#30340;&#22270;&#29255;&#12290;&#20854;&#20182;&#20154;&#31572;&#22797;&#36947;&#65292;&#24819;&#30693;&#36947;&#35201;&#23436;&#25104;&#36870;&#21521;&#36716;&#25442;&#35201;&#33457;&#22810;&#20037;&#26102;&#38388;&#65306;&#36716;&#25442;&#22270;&#29255;&#34920;&#24773;&#20026;&#25991;&#26412;&#12290;
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <p>&#20026;&#20102;&#21019;&#32426;&#24405;&#65292;&#25105;&#33457;&#20102;&#22823;&#32422;20&#20998;&#38047;&#12290;&#22823;&#37096;&#20998;&#26102;&#38388;&#26159;&#33457;&#22312;&#30740;&#31350;&#24050;&#21457;&#24067;&#30340;&#33258;&#21160;&#36716;&#25442;&#22270;&#29255;&#34920;&#24773;&#30340;&#36719;&#20214;&#19978;&#20102;&#65292;&#28982;&#21518;&#32534;&#20889;&#20102;&#35814;&#23613;&#30340;&#36716;&#25442;&#34920;&#12290;</p>
               <p>&#36825;&#20010;&#33050;&#26412;&#20506;&#36182;&#20110;&#33021;&#33258;&#21160;&#29983;&#25104;&#34920;&#24773;&#22270;&#29255;&#30340;&#22823;&#22810;&#25968;&#36719;&#20214;&#26377;&#22914;&#19979;&#29305;&#24449;&#65306;&#36825;&#20123;&#36719;&#20214;&#20250;&#25226;&#30456;&#21516;&#21547;&#20041;&#30340;&#25991;&#23383;&#34920;&#24773;&#31526;&#21495;&#25918;&#22312; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#30340; <code class="sgmltag-attribute">alt</code>  &#23646;&#24615;&#37324;&#12290;&#25152;&#20197;&#65292;&#36825;&#20010;&#33050;&#26412;&#23454;&#38469;&#19978;&#25152;&#20570;&#30340;&#26159;&#65306;&#22914;&#26524; ALT &#25991;&#26412;&#21305;&#37197;&#39044;&#23450;&#20041;&#30340;&#24120;&#37327;&#21015;&#34920;&#20013;&#30340;&#26576;&#19968;&#26465;&#65292;&#23601;&#29992;&#22270;&#29255;&#30340; ALT &#25991;&#26412;&#26469;&#26367;&#25442;&#22270;&#29255;&#12290;
               </p>
               <div class="example"><a name="example.casestudy.frownies" class="skip" href="#example.casestudy.frownies" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;5.6.&nbsp;
                     <a href="http://www.firefox.net.cn/dig/download/frownies.user.js" title="Download Frownies">
                        <code class="filename">frownies.user.js</code>
                        </a>
                     
                  </h3><pre class="programlisting ">// ==UserScript==
// @name          Frownies
// @namespace     http://diveintogreasemonkey.org/download/
// @description   convert graphical smilies to their text equivalents
// @include       *
// ==/UserScript==

var smilies, images, img, replacement;
smilies = [":)", ":-)" ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/",
	":/", ":X", ":-X", ":\"&gt;", ":P", ":-P", ":O", ":-O", "X-(",
	"X(", ":-&gt;", ":&gt;", "B-)", "B)", "&gt;:)", ":((", ":(((", ":-((",
	":))", ":-))", ":-|", ":|", "O:-)", "O:)", ":-B", ":B", "=;",
	"I)", "I-)", "|-)", "|)", ":-&amp;", ":&amp;", ":-$", ":$", "[-(", ":O)",
	":@)", "3:-O", ":(|)", "@};-", "**==", "(~~)", "*-:)", "8-X",
	"8X", "=:)", "&lt;):)", ";;)", ":*", ":-*", ":S", ":-S", "/:)",
	"/:-)", "8-|", "8|", "8-}", "8}", "(:|", "=P~", ":-?", ":?",
	"#-O", "#O", "=D&gt;", "~:&gt;", "%%-", "~O)", ":-L", ":L", "[-O&lt;",
	"[O&lt;", "@-)", "@)", "$-)", "$)", "&gt;-)", ":-\"", ":^O", "B-(",
	"B(", ":)&gt;-", "[-X", "[X", "\\:D/", "&gt;:D&lt;", "(%)", "=((", "#:-S",
	"#:S", "=))", "L-)", "L)", "&lt;:-P", "&lt;:P", ":-SS", ":SS", ":-W",
	":W", ":-&lt;", ":&lt;", "&gt;:P", "&gt;:-P", "&gt;:/", ";))", ":-@", "^:)^",
	":-J", "(*)", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:",
	":SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:",
	":RAZZ:", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:",
	":WINK:", ":!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:",
	":MRGREEN:"];
images = document.evaluate(
	'//img[@alt]',
	document,
	null,
	XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
	null);
for (var i = 0; i &lt; images.snapshotLength; i++) {
	img = images.snapshotItem(i);
	alt = img.alt.toUpperCase();
	for (var j in smilies) {
		if (alt == smilies[j]) {
			replacement = document.createTextNode(alt);
			img.parentNode.replaceChild(replacement, img);
		}
	}
}</pre></div>
               <p>&#36825;&#27573;&#20195;&#30721;&#20998;&#20026;&#22235;&#20010;&#27493;&#39588;&#65306;</p>
               <div class="orderedlist">
                  <ol type="1">
                     <li>&#23450;&#20041;&#34920;&#24773;&#31526;&#21495;&#30340;&#21015;&#34920;(&#25991;&#26412;&#26684;&#24335;)&#12290;</li>
                     <li>&#25214;&#20986;&#39029;&#38754;&#20013;&#25152;&#26377;&#21547;&#26377; <code class="sgmltag-attribute">alt</code> &#23646;&#24615;&#30340;&#22270;&#29255;&#12290;
                     </li>
                     <li>&#23545;&#27599;&#19968;&#24133;&#22270;&#20687;&#65292;&#26816;&#27979;&#23427;&#30340; ALT &#25991;&#26412;&#26159;&#21542;&#19982;&#21015;&#34920;&#20013;&#30340;&#26576;&#20010; ASCII &#34920;&#24773;&#31526;&#21495;&#21305;&#37197;&#12290;</li>
                     <li>&#22914;&#26524;&#21305;&#37197;&#65292;&#23601;&#26367;&#25442; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#20026;&#21253;&#21547; ASCII &#34920;&#24773;&#30340;&#25991;&#26412;&#33410;&#28857;&#12290;
                     </li>
                  </ol>
               </div>
               <p>&#31532;&#19968;&#27493;&#31616;&#21333;&#30340;&#23450;&#20041;&#20102;&#19968;&#20010;&#21015;&#34920;&#65292;&#29992; Javascript &#30340; <code class="literal">[ ]</code> &#35821;&#27861;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">smilies = [":)", ":-)" ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/",
	":/", ":X", ":-X", ":\"&gt;", ":P", ":-P", ":O", ":-O", "X-(",
	"X(", ":-&gt;", ":&gt;", "B-)", "B)", "&gt;:)", ":((", ":(((", ":-((",
	":))", ":-))", ":-|", ":|", "O:-)", "O:)", ":-B", ":B", "=;",
	"I)", "I-)", "|-)", "|)", ":-&amp;", ":&amp;", ":-$", ":$", "[-(", ":O)",
	":@)", "3:-O", ":(|)", "@};-", "**==", "(~~)", "*-:)", "8-X",
	"8X", "=:)", "&lt;):)", ";;)", ":*", ":-*", ":S", ":-S", "/:)",
	"/:-)", "8-|", "8|", "8-}", "8}", "(:|", "=P~", ":-?", ":?",
	"#-O", "#O", "=D&gt;", "~:&gt;", "%%-", "~O)", ":-L", ":L", "[-O&lt;",
	"[O&lt;", "@-)", "@)", "$-)", "$)", "&gt;-)", ":-\"", ":^O", "B-(",
	"B(", ":)&gt;-", "[-X", "[X", "\\:D/", "&gt;:D&lt;", "(%)", "=((", "#:-S",
	"#:S", "=))", "L-)", "L)", "&lt;:-P", "&lt;:P", ":-SS", ":SS", ":-W",
	":W", ":-&lt;", ":&lt;", "&gt;:P", "&gt;:-P", "&gt;:/", ";))", ":-@", "^:)^",
	":-J", "(*)", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:",
	":SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:",
	":RAZZ:", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:",
	":WINK:", ":!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:",
	":MRGREEN:"];</pre></div>
               <p>&#25509;&#19979;&#26469;&#65292;&#25105;&#22312;&#39029;&#38754;&#20013;&#20351;&#29992; XPath &#26597;&#35810;&#35821;&#21477;&#25628;&#32034;&#25152;&#26377;&#30340;&#21547;&#26377; <code class="sgmltag-attribute">alt</code> &#23646;&#24615;&#30340; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#12290;&#26377;&#20851; XPath &#26597;&#35810;&#35821;&#21477;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/match-attribute.html" title="4.6.&nbsp;&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;">&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">images = document.evaluate(
'//img[@alt]',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);</pre></div>
               <p>&#31532;&#19977;&#27493;&#65292;&#36941;&#21382;&#25152;&#26377;&#30340; <code class="sgmltag-element">&lt;img&gt;</code>&#20803;&#32032;,&#26816;&#39564; <code class="sgmltag-attribute">alt</code> &#23646;&#24615;&#26159;&#21542;&#19982;&#25105;&#20204;&#23450;&#20041;&#30340;&#34920;&#24773;&#31526;&#21495;&#21305;&#37197;&#12290;&#30001;&#20110;&#19968;&#20123;&#34920;&#24773;&#31526;&#21495;&#21547;&#26377;&#23383;&#27597;&#65292;&#25105;&#29992;toUpperCase()&#26041;&#27861;&#22312;&#27604;&#36739;&#21069;&#25226; <code class="sgmltag-attribute">alt</code> &#23646;&#24615;&#36716;&#25442;&#20026;&#22823;&#20889;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">for (var i = 0; i &lt; images.snapshotLength; i++) {
	img = images.snapshotItem(i);
	alt = img.alt.toUpperCase())
	for (var j in smilies) {
		if (alt == smilies[j]) {
			// ...
		}
	}
}</pre></div>
               <p>&#26368;&#21518;&#65292;&#25105;&#21019;&#24314;&#20102;&#19968;&#20010;&#21253;&#21547;&#25991;&#23383;&#34920;&#24773;&#31526;&#21495;&#30340;&#26032;&#25991;&#26412;&#33410;&#28857;&#65292;&#28982;&#21518;&#29992;&#23427;&#26367;&#25442;&#25481;&#24050;&#26377;&#30340; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#12290;&#26356;&#22810;&#30340;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/replace-element.html" title="4.10.&nbsp;&#26367;&#25442;&#20803;&#32032;&#20026;&#26032;&#20869;&#23481;">&#26367;&#25442;&#20803;&#32032;&#20026;&#26032;&#20869;&#23481;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">replacement = document.createTextNode(alt);
img.parentNode.replaceChild(replacement, img);</pre></div>
               <div class="download">
                  <h3>&#19979;&#36733;</h3>
                  <ul>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/frownies.user.js">
                           <code class="filename">frownies.user.js</code>
                           </a>
                        
                     </li>
                  </ul>
               </div>
               <div class="seealso">
                  <h3>&#21442;&#35265;</h3>
                  <ul>
                     <li>
                        <a href="../patterns/match-attribute.html" title="4.6.&nbsp;&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;">&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/replace-element.html" title="4.10.&nbsp;&#26367;&#25442;&#20803;&#32032;&#20026;&#26032;&#20869;&#23481;">&#26367;&#25442;&#20803;&#32032;&#20026;&#26032;&#20869;&#23481;</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="dumbquotes.html">&#26696;&#20363;&#65306;Dumb Quotes</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="zoomtextarea.html">&#26696;&#20363;&#65306;Zoom Textarea</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>